<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/header.css">
	</head>


	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title">添加好友</h1>
		</header>
		<div class="mui-content">
			<div class="mui-input-row">
				<input type="text" id="search_username" style="height: 45px;" class="mui-input-speech mui-input-clear" placeholder="搜索微涵号">
			</div>
		</div>

		<ul class="mui-table-view" id="userList">
		 
		</ul>


	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/app.js"></script>

	<script type="text/javascript">
		mui.init({
				swipeBack: true //启用右滑关闭功能
			});

		mui.plusReady(function() {
			//获取全局用户信息
			var myUser = app.getUserGlobalInfo();
			//获取搜索框内容
			var search_username = document.getElementById("search_username");
			var link_search = document.getElementById("link_search")
			//搜索好友
			search_username.addEventListener("keyup", function() {
				mui.ajax(app.serverUrl + '/user/searchUsername', {
					data: {
						username: search_username.value
					},
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						if (data.status == 200) {
							var user = data.data;
							var userList = document.getElementById("userList");
							if (user) {
								var imgURL = user.faceImage.substring(0, 4) === "http" ? user.faceImage : app.imgServerUrl + user.faceImage;
								var str =
									`
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="` +
									imgURL + `">
									<div class="mui-media-body">
										` + user.nickname +
									`
									<button id="addUser"  style="width: 200px;text-align: center;background: greenyellow;border: none;" class="mui-pull-right">添加好友</button>
										<p class="mui-ellipsis" id="toUser">微涵号: ` + user.username +`</p>
									</div>
								</a>
							</li>
							`;
								userList.innerHTML =str;
								var addUser = document.getElementById("addUser");
								var toUser = document.getElementById("toUser");
								//添加好友
								addUser.addEventListener('tap',function(){
									mui.ajax(app.serverUrl+'/user/addUser',{
										//使用之前所存入的ip来进行通信
										data:{
											sendUserId: myUser.id,
											acceptUserId: user.id
										},
										type:'post',//HTTP请求类型
										timeout:10000,//超时时间设置为10秒；
										success:function(data){ 
											if(data.status==200){
												app.showToast(data.data,"succeed")
												console.log(JSON.stringify(data));
												
											}else{//服务器返回的数据为空,表明账户与密码验证失败
												app.showToast(data.data,"error");//弹出错误信息
											}
										},
										error:function(XMLHttpRequest, textStatus, errorThrown){
											if(textStatus=="timeout"){
												mui.toast("连接超时");//超过十秒报错
											}else if(textStatus=="error"){
												mui.toast("连接出错");
											}
										}
									});		
									
								})
	
							} else {
								userList.innerHTML =
									`
									<li class="mui-table-view-cell mui-media" style="text-align: center;">
										搜索无结果
									</li>
								`
							}

							console.log(JSON.stringify(data));



						} else { //服务器返回的数据为空,表明账户与密码验证失败
							app.showToast(data.data, "error"); //弹出错误信息
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						if (textStatus == "timeout") {
							mui.toast("连接超时"); //超过十秒报错
						} else if (textStatus == "error") {
							mui.toast("连接出错");
						}
					}
				});

			})


		})
	</script>

</html>
